<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import Icon from '@ant-design/icons-vue';
import * as icons from '@ant-design/icons-vue';
import { menuListApi, menuDetailApi, createMenuApi, updataMenuApi } from '@/api/sys/menu';
const emits = defineEmits(['modalClose'])
const iconList = Object.keys(icons).splice(0, Object.keys(icons).length - 4) // 剔除不是图标的元素

const dataFormRef = ref()
const open = ref(false);
const confirmLoading = ref(false)
const detailLoading = ref(false)
const menuList = ref([])
const rules = ref({
  name: [{ required: true, message: '请输入名称!' }],
  pid: [{ required: true, message: '请选择上级菜单!' }],
})
const dataForm = ref({
  id: undefined,
  pid: '0',
  isEdit: false, // 是否修改
  menuType: 0, //类型 0：菜单 1：按钮
  name: undefined,
  url: undefined,
  // openStyle: 0, // 菜单打开方式 0内部 1外部
  permissions: '',
  parentName: '一级菜单',
  sort: 0,
  icon: undefined
})

const init = (load, isEdit) => {
  open.value = true
  dataForm.value.isEdit = isEdit
  if (load) {
    if (isEdit) {
      dataForm.value.id = load
      getInfo()
    } else {
      dataForm.value.pid = load.id
      dataForm.value.parentName = load.name
    }
  }
  menuListApi({type: '0'}).then(({data:res}) => {
    menuList.value = [
      {
        pid: '0',
        id: '0',
        name: '一级菜单',
      },
      ...res.data
    ]
  })
}
const getInfo = () => {
  detailLoading.value = true
  menuDetailApi(dataForm.value.id).then(({data:res}) => {
    dataForm.value = {
      ...dataForm.value,
      ...res.data
    }
  }).finally(() => {
    detailLoading.value = false
  })
}
const submit = () => {
  dataFormRef.value.validate().then(() => {
    confirmLoading.value = true
    const submitApi = dataForm.value.isEdit ? updataMenuApi : createMenuApi
    dataForm.value.icon = dataForm.value.icon || ''
    submitApi(dataForm.value).then(() => {
      message.success('保存成功！')
      open.value = false
      emits('modalClose', true)
    }).finally(() => {
      confirmLoading.value = false
    })
  })
}

defineExpose({
  init
})
</script>

<template>
  <a-modal 
    width="40%"
    v-model:open="open" 
    :confirm-loading="confirmLoading"
    :title="dataForm.isEdit ? '修改菜单' : '新增菜单'" 
    okText="确定"
    cancelText="取消"
    :maskClosable="false"
    :bodyStyle="{'padding': '20px'}"
    @cancel="emits('modalClose')"
    @ok="submit"
    >
    <a-spin :spinning="detailLoading">
      <a-form ref="dataFormRef" layout="vertical" :model="dataForm" name="dataForm" autocomplete="off">
        <a-form-item label="类型" name="menuType">
          <a-radio-group v-model:value.trim="dataForm.menuType" :disabled="dataForm.isEdit">
            <a-radio :value="0">菜单</a-radio>
            <a-radio :value="1">按钮</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="名称" name="name" :rules="rules.name">
          <a-input v-model:value.trim="dataForm.name" placeholder="请输入名称" />
        </a-form-item>

        <a-form-item label="上级菜单" name="pid" :rules="rules.pid">
          <a-tree-select
            v-model:value.trim="dataForm.pid"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择上级菜单"
            allow-clear
            :tree-data="menuList"
            :field-names="{
              label: 'name',
              value: 'id',
            }"
            tree-node-filter-prop="name"
            @change="(value, label, extra) => dataForm.parentName=label[0]"
          >
          </a-tree-select>
        </a-form-item>

        <a-form-item v-if="dataForm.menuType==0" label="路由" name="url">
          <a-input v-model:value.trim="dataForm.url" placeholder="请输入路由" />
        </a-form-item>

        <a-form-item label="授权标识" name="permissions">
          <a-input v-model:value.trim="dataForm.permissions" placeholder="多个用逗号分隔，如：sys:menu,sys:menu:save" />
        </a-form-item>

        <a-form-item label="排序" name="sort" :rules="rules.sort">
          <a-input-number style="width: 100%;" id="inputNumber" v-model:value.trim="dataForm.sort" :min="0"/>
        </a-form-item>

        <a-form-item v-if="dataForm.menuType==0" label="图标" name="icon">
          <a-select
            ref="select"
            v-model:value.trim="dataForm.icon"
            style="width: 100%"
            placeholder="请选择图标"
            showSearch
            allowClear 
          >
            <a-select-option v-for="(item,index) in iconList" :value="item" :key="index">
              <Icon :component=icons[item] />
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <!-- <a-form-item v-if="dataForm.menuType==0" label="打开方式" name="openStyle">
          <a-radio-group v-model:value.trim="dataForm.openStyle">
            <a-radio :value="0">内部打开</a-radio>
            <a-radio :value="1">外部打开</a-radio>
          </a-radio-group>
        </a-form-item> -->
      </a-form>
    </a-spin>
  </a-modal>
</template>

<style lang="scss" scoped>

</style>